<template>
  <div class="user">
    <page-search
      :search-config="searchConfig"
      @resetClick="handleSearchReset"
      @queryClick="handleSearchQuery"
    />
    <page-content
      :content-config="contentConfig"
      ref="contentRef"
      @createRecord="handleCreateRecord"
      @editRecord="handleEditRecord"
    >
      <template #status="scope">
        <el-button :type="scope.row.enable ? 'success' : 'danger'" plain size="small">
          {{ scope.row.enable ? '启用' : '禁用' }}
        </el-button>
      </template>
    </page-content>
    <page-modal ref="modalRef" :modal-config="modalConfigRef" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import PageSearch from '@/components/page-search/page-search.vue';
import searchConfig from '@/views/main/system/user/config/search.config';
import contentConfig from '@/views/main/system/user/config/content.config';
import modalConfig from '@/views/main/system/user/config/modal.config';
import usePageContent from '@/hooks/usePageContent';
import usePageModal from '@/hooks/usePageModal';
import { useMainStore } from '@/store/mian';
import { storeToRefs } from 'pinia';
const { contentRef, handleSearchReset, handleSearchQuery } = usePageContent();
const { modalRef, handleCreateRecord, handleEditRecord } = usePageModal();

const mainStore = useMainStore();
const { stateEntireRoles, stateEntireDepartments } = storeToRefs(mainStore);

const modalConfigRef = computed(() => {
  const departments = stateEntireDepartments.value?.map((item) => {
    return { label: item.name, value: item.id };
  });
  const roles = stateEntireRoles.value?.map((item) => {
    return { label: item.name, value: item.id };
  });
  if (departments !== undefined) {
    modalConfig.formItems.forEach((item) => {
      if (item.prop === 'departmentId' && item.options?.length === 0) {
        item.options.push(...departments);
      }
    });
  }
  if (roles !== undefined) {
    modalConfig.formItems.forEach((item) => {
      if (item.prop === 'roleId' && item.options?.length === 0) {
        item.options.push(...roles);
      }
    });
  }
  return modalConfig;
});
</script>

<style scoped lang="scss">
.user {
}
</style>
